<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>props使用</title>
</head>
<body>
  <!-- 准备容器 -->
  <div id="test"></div>
  <div id="test1"></div>
  <!-- 按照顺序引入 -->
  <script type="text/javascript" src="../../js/react.development.js"></script>
  <script type="text/javascript" src="../../js/react-dom.development.js"></script>
  <script type="text/javascript" src="../../js/babel.min.js"></script>
  <!-- 引入prop-types用于对组件标签属性进行限制 -->
  <script type="text/javascript" src="../../js/prop-types.js"></script>
  <script type="text/babel" >
    class Person extends React.Component {
      // 类中的构造器可以写 可以不写  但是写了就需要接收props  若不接受  不会报错  但是可能会无法拿到this.props  返回undefined
      constructor(props) {
        console.log(props);
        super(props) // 构造器是否接收props 是否传递给super  取决于是否希望在构造器中通过this访问props
      }
      // 对标签属性进行限制
      static propTypes = {
        name:PropTypes.string.isRequired,
        sex:PropTypes.string,
        age:PropTypes.number,
      }
      static defaultProps={
        sex:'人妖',
        age:18
      }
      render () { 
        // props是只读的  不能修改  this.props.name='jack'会报错
        const {name,age,sex} = this.props
        return (
          <ul>
              <li>姓名：{name}</li>
              <li>性别：{sex}</li>
              <li>年龄：{age+1}</li>
          </ul>
        )
      }
    }

    ReactDOM.render(<Person name='tom' sex='男' age={18}/>,document.getElementById('test'))
  </script>
</body>
</html>